<!-- LoadingComponent.vue -->
<template>
  <div class="loader">
    <div class="spinner">
      <i class="el-icon-loading"/>
      <p class="loading-text">Loading</p>
    </div>
  </div>
</template>

<style scoped>
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2006;
}

.loading-text {
  margin: 5px;
  color: #409EFF;
  font-size: 21px;
  font-family: Arial, sans-serif;
}

.spinner{
  display: flex;
  text-align: center;
  flex-direction: column;
  //border: 16px solid #f3f3f3; /* Light grey */
  //border-top: 16px solid #3498db; /* Blue */
  //border-radius: 50%;
  //width: 120px;
  //height: 120px;
  //animation: spin 2s linear infinite;
}

.el-icon-loading {
  color: #409EFF;
  font-size: 36px;
  font-family: Arial, sans-serif;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>